/*
 * @Author: Royce
 * @Date: 2019-01-16 11:14:12
 * @Des: []
 * @flow
 */


import React, {Component,} from 'react';

import {View, Text, StyleSheet, TouchableWithoutFeedback, Dimensions} from 'react-native';


const marginLeft = 14.0;
export let screenW = Dimensions.get('window').width;
type Props = {
    title: string,
    subTitle?: string,
    action?: Function,
    subElement?: Object,
    contentStyle?: Object,
    isLine?: boolean,
    isLineStyle?: Object,
    titleStyle?: Object,
    containerStyle?: Object
}

export default class TitleAndContent extends Component<Props> {

    constructor(props: Props) {
        super(props);
    }

    renderTitleView = () => {
        return <Text>{this.props.title}</Text>;
    };
    renderSectionDividView = () => {
        return (
            <View
                style={{
                    height: 10,
                    width: '100%',
                    alignSelf: 'flex-end'
                }}
            />
        );
    };

    renderLine = () => {
        return (
            <View
                style={{
                    height: 1,
                    width: screenW - marginLeft,
                    backgroundColor: '#f5f5f5',
                    alignSelf: 'flex-end'
                }}
            />
        );
    };


    render() {
        let {action, title, contentStyle, isLine, containerStyle, titleStyle} = this.props;
        return (
            <TouchableWithoutFeedback onPress={() => {

                action ? action() : '';
            }}
            >
                <View style={styles.container}>
                    <View style={[styles.content, containerStyle]}>
                        <Text style={[styles.titleText, titleStyle]}>{title}</Text>
                        {this.renderSub()}
                    </View>
                    {isLine ? this.renderLine() : null}
                </View>
            </TouchableWithoutFeedback>

        );
    }

    renderSub = () => {
        let {isColor, subElement, subTitle, contentStyle} = this.props;
        if (subElement) {
            return subElement;
        } else {
            return (
                <View>
                    <Text
                        numberOfLines={1}
                        ellipsizeMode={'tail'}
                        style={[{width: screenW - 14 - 14 - 100, marginRight: 14, textAlign: 'right'}, contentStyle]}
                    >
                        {subTitle}
                    </Text>
                </View>

            );
        }
    }
}

const styles = StyleSheet.create({
    container: {

        backgroundColor: 'white',
    },
    content: {

        flexDirection: 'row',
        alignItems: 'center',
        height: 49,
        justifyContent: 'space-between'

    },
    titleText: {
        color: '#999999',
        fontSize: 14,
        marginLeft: 14,
    }

});
